<template>
    <el-container>
        <el-header>
            <div class="header_top">
                <img src="../assets/img/math_top.jpg" alt="">
                <h3>java教学实践平台</h3>
            </div>
        </el-header>
        <el-main>
            <div class="container_middle">
                <img src="../assets/img/java-1.jpg" alt="">
                <div class="loginForm">
                    <el-form ref="loginRef" :rules="loginRules" :model="parmas" label-width="80px"
                        :hide-required-asterisk="true">
                        <el-form-item>
                            <h4>登录</h4>
                        </el-form-item>
                        <el-form-item label="账号" prop="studentNumber">
                            <el-input v-model="parmas.studentNumber" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="parmas.password" placeholder="请输入密码" show-password></el-input>
                        </el-form-item>
                        <el-form-item class="loginButton">
                            <el-button type="primary" @click="login">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-main>
        <el-footer>
            <div>
                <p>航空港校区 | 四川省成都市西南航空港经济开发区学府路一段24号 | 邮编：610225 | 电话：028-85966502</p>
                <p>龙泉校区 | 成都市龙泉驿区阳光城幸福路10号 | 邮编：610103 | 电话：028-84833333</p>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                // 登录需要的参数
                parmas: {
                    // 用户名
                    studentNumber: "200001",
                    // 密码
                    password: "123456"
                },
                loginRules: {
                    studentNumber: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                },
            }
        },
        methods: {
            // 登录的请求方法
            login() {
                this.$refs.loginRef.validate(async valid => {
                    if (!valid) return;
                    const { data: res } = await this.$axios.post('/login', this.parmas)
                    if (res.code !== 200) return this.$message.error('登录失败！')
                    this.$message.success('登录成功')
                    // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
                    //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
                    //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
                    window.sessionStorage.setItem('token', res.data.token)
                    // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
                    this.$router.push({
                        path: '/home',
                    });
                    window.sessionStorage.setItem('userId', res.data.id)
                    window.sessionStorage.setItem('username', res.data.username)
                    window.sessionStorage.setItem('studentNumber', res.data.studentNumber)
                    window.sessionStorage.setItem('classId', res.data.classId)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    /* 整体 */
    .el-container {
        height: 100%;
    }

    /* 头部区域 */
    .el-header {
        height: 120px !important;
        border-bottom: solid blue 2px;

        /* 头部区域排版 */
        .header_top {
            display: flex;
            justify-content: flex-start;

            /* 头部图片 */
            img {
                width: 355px;
                height: 114px;
                margin-right: 200px;
            }

            /* 头部文字 */
            h3 {
                margin: 0;
                line-height: 120px;
                font-size: 60px;
                color: #233d98;
                font-family: "Times New Roman", Times, serif;
            }
        }
    }

    .el-main {
        height: 100%;

        /* background-color: #eaedf1; */
        .container_middle {
            margin-top: 40px;
            display: flex;
            justify-content: space-around;

            img {
                width: 480px;
                height: 397px;
            }

            /* 登录窗口 */
            .loginForm {
                width: 400px;
                height: 300px;
                background-color: #f6f7f9;
                padding: 30px;

                .loginButton {
                    text-align: center;
                    margin-top: 50px;
                    margin-right: 30px;
                }

                h4 {
                    margin-top: 20px;
                    font-size: 30px;
                    line-height: 20px;
                }
            }
        }
    }

    .el-footer {
        height: 150px !important;
        background-color: #DDDDDD;
        font-size: 10px;
        color: #808080;

        div {
            display: flex;
            justify-content: center;
            flex-direction: column;
            margin-top: 40px;
            margin-left: 500px;
        }
    }
</style>